<template>
  <div class="login-register">
    <div class="main">
      <div class="title">
        <span
          :class="type === 0 ? 'active' : ''"
          @click="loginRegister(0)"
        >登录</span>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span
          :class="type === 1 ? 'active' : ''"
          @click="loginRegister(1)"
        >注册</span>
      </div>
      <login v-if="type === 0" />
      <register v-else />
    </div>
  </div>
</template>

<script>
import Login from "./children/Login";
import Register from "./children/Register";

import { getCurrentInstance, ref, onBeforeMount } from "vue";

export default {
  name: "MajorLoginRegister",
  components: {
    Login,
    Register,
  },
  setup() {
    const { ctx } = getCurrentInstance();
    const type = ref(0);
    //判断是登录还是注册
    const isLogin = () => {
      const { path } = ctx.$router.currentRoute.value;
      type.value = path === "/login" ? 0 : 1;
    };
    // 选择登录或者注册
    const loginRegister = num => {
      if(num === 0 && num !== type.value) {
        type.value = 0
        ctx.$router.replace('/login')
      }
      if(num === 1 && num !== type.value) {
        type.value = 1
        ctx.$router.replace('/register')
      }
    }
    onBeforeMount(() => {
      isLogin();
    });

    return {
      type,
      loginRegister
    };
  },
};
</script>

<style scoped lang='stylus' >
.login-register
  background-color #f1f1f1
  height 100vh
  width 100%

  .main
    width 400px
    margin 80px auto
    height 400px
    padding 30px
    background-color #fff
    border-radius 4px
    box-shadow 0 0 8px rgba(0, 0, 0, 0.1)
    vertical-align middle

    .title
      text-align center
      font-size 18px
      color #999

      span
        cursor pointer

      .active
        font-weight bold
        color #007bff

.login-register::before
  content ''
  display table
</style>